<template>
      <div class="nav">
        <div class="bac">
          <div class="btn_list">
            <div class="btn_content">
              <div class="header">
                <i class="el-icon-house"></i>
                <span class="title"><a href="/index">首页</a></span>
              </div>
              <div class="header">
                <i class="el-icon-camera"></i>
                <span class="title"><a href="/hall">电影大厅</a></span>
              </div>
              <div class="header">
                <i class="el-icon-edit"></i>
                <span class="title"><a href="/feedback">意见反馈</a></span>
              </div>
              <div class="header">
                <i class="el-icon-phone-outline"></i>
                <span class="title"><a href="/call">联系我们</a></span>
              </div>
              <div class="login_btn" v-if="token==null">
                <el-button size="small" type="info" @click="LoginFormVisible = true" round>登录</el-button>
                <el-button size="small" type="info" round @click="RegisterFormVisible = true">注册</el-button>
              </div>
              <div class="login_btn" v-else>
                <span class="" >欢迎{{token}}  |</span>
                <span><router-link style="color: white" :to="{name:'UserInfo'}">个人中心</router-link>  |</span>
                <a style="color: white" href="" @click="exit()">退出</a>
              </div>
            </div>

            <!--登录页面-->
            <el-dialog title="登录界面"  :append-to-body='true' :visible.sync="LoginFormVisible" width="30%" center>
              <el-form :model="User" status-icon :rules="rules" ref="ruleForm" >
                <el-form-item label="用户账号：" prop="name" :label-width="formLabelWidth">
                  <el-input style="width: 300px;" v-model="User.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户密码："prop="password" :label-width="formLabelWidth">
                  <el-input style="width: 300px" type="password" v-model="User.password" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div style="float: right">
                <a href="http://localhost:8888/findPd" >忘记密码？</a>
              </div>
              <div slot="footer" class="dialog-footer" style="margin-left: 50px">
                <el-button style="width: 100px" @click="LoginFormVisible = false">取 消</el-button>
                <el-button style="width: 100px" type="primary" @click="submitForm('ruleForm')">登 录</el-button>
              </div>
            </el-dialog>

            <!--注册页面-->
            <el-dialog title="注册界面"  :append-to-body='true' :visible.sync="RegisterFormVisible" width="30%" center>
              <el-form :model="People" status-icon :rules="rules" ref="ruleForm1" >
                <el-form-item label="输入账号：" prop="name" :label-width="formLabelWidth">
                  <el-input style="width: 300px" v-model="People.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="输入号码：" prop="phone" :label-width="formLabelWidth">
                  <el-input  style="width: 300px" v-model="People.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="输入密码：" prop="password" :label-width="formLabelWidth">
                  <el-input type="password" style="width: 300px" v-model="People.password" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer" style="margin-left: 50px">
                <el-button style="width: 100px" @click="RegisterFormVisible = false">取 消</el-button>
                <el-button style="width: 100px" type="primary" @click="RegisterForm('ruleForm1')">注 册</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
      </div>
</template>

<script>
    export default {
      name: "Nav",
      data() {
        const checkPhone = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('手机号不能为空'));
          } else {
            const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
            console.log(reg.test(value));
            if (reg.test(value)) {
              callback();
            } else {
              return callback(new Error('请输入正确的手机号'));
            }
          }
        };
        return {
            token:localStorage.getItem("name"),
            User: {},
            People: {},
            LoginFormVisible: false,//登录页面
            RegisterFormVisible: false,//修改页面
            formLabelWidth: '100px',
            rules: {
              name: [
                {required: true, message: '请输入账号名称', trigger: 'blur'},
                {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
              ],
              password: [
                {required: true, message: '请输入密码', trigger: 'blur'},
              ],
              phone: [
                {required: true, message: '手机号不能为空', trigger: 'blur'},
                {validator: checkPhone, trigger: 'blur'}
              ],
            }
          }
      },
      methods:{
        /*退出*/
        exit(){
          alert("退出成功！")
          localStorage.removeItem("name")
          localStorage.removeItem("id")
          this.$router.push({name:'Index'})
        },
        /*token*/
        findToken(){
          this.token = localStorage.getItem("name")
        },
        /*登录*/
        submitForm(formName) {
          this.$refs[formName].validate(async  (valid) => {
            if (valid) {
              if(!this.User.name){alert('请输入账号');return false}
              if(!this.User.password){alert('请输入密码');return false}
              let _this = this
              this.$axios.post("http://localhost:8088/user/login",this.User).then(function (res) {
                //清空本次保存数据
                if(res.data!=-1){
                  localStorage.setItem("name",_this.User.name)
                  localStorage.setItem("id",res.data)
                  _this.token = localStorage.getItem("name");
                  _this.$options.methods.findToken();
                  alert("登录成功！")
                  _this.User = {};
                  _this.LoginFormVisible =false
                }else {
                  alert("账号或密码错误！");
                  _this.User = {};
                }
              }).catch(function (err) {
                localStorage.removeItem('name')
                localStorage.removeItem('id')
                alert("登陆失败！");
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        /*注册*/
        RegisterForm(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              if(!this.People.name){alert('请输入用户名称');return false}
              if(!this.People.password){alert('请输入用户密码');return false}
              this.People.roleId = 2
              console.log(this.People)
              let _this = this
              this.$axios.post("http://localhost:8088/user/setUser",this.People).then(function () {
                //清空本次保存数据
                alert("注册成功！请重新登录！")
                _this.People = {};
                location. reload()
              }).catch(function (err) {
                // alert("用户信息添加失败，请稍后再试")
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
      }
    }
</script>

<style scoped>
  .login_btn{
    float: right;
    margin-top: 8px;
    margin-right: 100px;
  }

  .login_btn span{
    color: white;
  }
  .btn_content .header {
    float: left;
    margin-top: 10px;
    margin-left: 120px;
    font-weight: bold;
    color: rgba(228,228,228,0.94);
  }
  .header a{
    color: rgba(228,228,228,0.94);
  }

  .header a:hover{
    color: white;
  }
  a{
    text-decoration: none;
  }

  .btn_list{
    width: 1200px;
    height: 60px;
    margin: auto;
  }
  .bac{
    width: 100%;
    height: 50px;
    background: rgba(84,86,82,0.94);
    box-shadow: 1px 1px 10px gray;
  }
</style>
